<template>
  <view class="page-food-detail">
    <view class="table-no" v-if="orderInfo.foodTableNo"
      >桌号：{{ tableNo || "-" }}</view
    >
    <view class="food-title">菜品详情</view>
    <view class="food-list">
      <view
        class="food-item"
        v-for="(item, index) in orderInfo.orderItemList"
        :key="index"
      >
        <view class="left">
          <view
            class="img"
            :style="{
              backgroundImage: `url(${foodFile + item.thumbnail})`,
            }"
          >
          </view>
          <view class="title-num">
            <view>
              <view class="title">{{ item.goodsName }}</view>
              <!-- <view class="remark">{{ item.remark || "" }}</view> -->
            </view>
            <view class="num">x{{ item.number }}</view>
          </view>
        </view>
        <view class="right">
          ￥{{ item.totalFee ? item.totalFee.toFixed(2) : "-" }}
        </view>
      </view>
    </view>
    <view class="total-info flex-between">
      <view class="left">共{{ goodsNum }}件商品</view>
      <view class="right">实付￥{{ orderInfo.payFee }}</view>
    </view>
    <view class="card-list">
      <view class="card-list-item flex-between">
        <view class="label">订单号码</view>
        <view class="value">{{ orderInfo.id }}</view>
      </view>
      <view class="card-list-item flex-between">
        <view class="label">下单时间</view>
        <view class="value">{{ orderInfo.createTime }}</view>
      </view>
      <view class="card-list-item flex-between">
        <view class="label">支付方式</view>
        <view class="value">{{ orderInfo.payMethodName || "-" }}</view>
      </view>
      <view class="card-list-item flex-between">
        <view class="label">支付状态</view>
        <view class="value">{{ payTexts[orderInfo.payStatus] || "-" }}</view>
      </view>
    </view>
    <!--  v-if="orderInfo.payStatus === 'UNPAID'" -->
    <view
      v-if="orderInfo.payStatus === 'UNPAID'"
      class="page-btn"
      @click="creatPayOrder(orderInfo)"
      >立即支付</view
    >
  </view>
</template>

<script>
import {
  foodOrderDetail,
  submitFoodOrder,
  payTradeByUser,
} from "@/api/foodPage.js";
export default {
  data() {
    return {
      tableNo: uni.getStorageSync("tableNo"),
      foodFile: uni.getStorageSync("foodFile"),
      foodList: [],
      orderInfo: {},
      payTexts: {
        UNPAID: "待支付",
        PAID: "已支付",
        IN_AFTER_SALE: "售后中",
        REFUND: "已退款",
        FINISHED: "已完成",
        CLOSED: "已关闭",
      },
    };
  },
  onLoad(options) {
    this.getFoodOrderDetail(options.id);
  },
  computed: {
    goodsNum() {
      if (!this.orderInfo.orderItemList) return "0";
      const num = this.orderInfo.orderItemList.reduce((pre, cur) => {
        pre += cur.number;
        return pre;
      }, 0);
      return num;
    },
  },
  methods: {
    async creatPayOrder(orderInfo) {
      const params = {
        orderFatherId: orderInfo.id,
        payFee: orderInfo.payFee,
        payMethod: "WX",
      };
      const { body } = await payTradeByUser(params);
      if (!body.payInfo) return;
      const payInfo = JSON.parse(body.payInfo);
      uni.requestPayment({
        //微信支付
        provider: "wxpay",
        timeStamp: payInfo.timeStamp,
        nonceStr: payInfo.nonceStr,
        package: payInfo.packageValue,
        signType: payInfo.signType,
        paySign: payInfo.paySign,
        success: (res) => {
          uni.showToast({
            title: "支付成功",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages/orderPage/index?type=1`,
            });
          }, 2000);
        },
        fail(err) {
          uni.showToast({
            title: "支付失败",
            icon: "error",
          });
        },
      });
    },
    async getFoodOrderDetail(id) {
      const { body } = await foodOrderDetail({ id });
      this.orderInfo = body;
    },
  },
};
</script>

<style lang="scss" scoped>
.page-food-detail {
  background-color: #fff;
  padding: 30rpx;
  box-sizing: border-box;
  min-height: 100%;

  .table-no {
    background-color: #fff;
    padding: 30rpx;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #373737;
    border-bottom: 1px solid #f6f6f6;
  }
  .food-title {
    font-weight: bold;
    font-size: 40rpx;
    margin-bottom: 30rpx;
  }
  .food-list {
    padding: 30rpx;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fff;
    .food-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50rpx;
      .left {
        display: flex;
        align-items: center;
        .img {
          width: 140rpx;
          height: 140rpx;
          flex-shrink: 0;
          margin-right: 30rpx;
          background-color: #f2f2f2;
          border-radius: 10rpx;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .title-num {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
          }
          .remark {
            font-size: 22rpx;
            color: #999;
            margin-bottom: 20rpx;
          }
          .num {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
  .total-info {
    padding: 30rpx 0;
    font-size: 40rpx;
    font-weight: bold;
    border-bottom: 1px solid #dbdbdb;
  }
  .card-list {
    margin-top: 30rpx;
    .card-list-item {
      color: #999;
      padding: 10rpx 0;
    }
  }
}
</style>
